<template>
  <div>
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <!-- 新建 -->
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="addEdit('', 'add')"
          v-permission="['roles@save']"
          >{{ $t("common.common18") }}</el-button
        >
      </div>
      <el-table
        v-permission="['roles@index']"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        highlight-current-row
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :max-height="$store.state.app.tableHeight"
      >
        <el-table-column prop="id" label="id" min-width="80" />
        <!-- 上级角色 -->
        <el-table-column
          prop="parent.role_name"
          :label="$t('role.role1')"
          min-width="180"
        />
        <!-- 角色名称 -->
        <el-table-column
          :label="$t('role.role2')"
          min-width="180"
          prop="role_name"
        />
        <!-- 操作 -->
        <el-table-column
          :label="$t('common.common3')"
          min-width="160px"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['roles@save', 'roles@read', 'roles@delete'])"
        >
          <template slot-scope="scope">
            <div>
              <span
                @click="addEdit(scope.row.id, 'add')"
                v-permission="['roles@save']"
              >
                <!-- 添加下级 -->
                <btn-tip
                  :content="$t('common.common37')"
                  type="primary"
                  icon="el-icon-circle-plus-outline"
                ></btn-tip>
              </span>
              <span
                @click="edit(scope.row.id)"
                v-show="scope.row.id == 1 ? false : true"
                v-permission="['roles@read']"
              >
                <!-- 编辑 -->
                <btn-tip
                  :content="$t('common.common20')"
                  type="success"
                  icon="el-icon-edit"
                ></btn-tip>
              </span>
              <span
                @click="delList(scope.row.id)"
                v-show="scope.row.id == 1 ? false : true"
                v-permission="['roles@delete']"
              >
                <!-- 删除 -->
                <btn-tip
                  :content="$t('common.common9')"
                  type="danger"
                  icon="el-icon-delete"
                ></btn-tip>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="lint.page"
        :page-size.sync="lint.limit"
        @pageChange="getList"
        v-permission="['roles@index']"
      />
    </el-card>
    <deptAddEdit ref="addEdit" />
  </div>
</template>
<script>
import deptAddEdit from "@/components/system/roleAddEdit";
import { getList, delList } from "@/api/system/role";

export default {
  components: {
    deptAddEdit,
  },
  data() {
    return {
      tableData: [],
      lint: {
        page: 1,
        limit: 10,
      },
      total: 0,
    };
  },
  mounted() {
    this.getList();
    console.log(this.$route.meta);
    this.$route.meta.buttonList.map((item) => {
      console.log(item.title + " : " + item.permission_mark);
    });
  },
  methods: {
    edit(id) {
      this.$refs.addEdit.EditInit(id);
    },
    addEdit(id, childrenId) {
      this.$refs.addEdit.init(id, childrenId);
    },
    getList() {
      getList(this.lint).then((res) => {
        if (res.code == 10000) {
          this.tableData = res.data;
          this.total = res.count;
        }
      });
    },
    delList(id) {
      // 确定对[id=${id}]进行删除操作?
      // "确定删除？",
      this.$confirm(
        `${this.$t("common.common13")}[id=${id}]${this.$t(
          "common.common14"
        )}[${this.$t("common.common9")}]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          delList(id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
  },
};
</script>
